<template>
  <div style="height: 100%;background-color:white ;padding: 5px">
    <div>
      <div style="display: inline-block">
        <el-button @click="goBack" icon="el-icon-back" type="text">返回</el-button>
      </div>
      <div style="display: inline-block">|</div>
      <div style="display: inline-block;">
        <div style="padding-bottom: 15px;">
          <span style="font-family: 'Microsoft YaHei',sans-serif;display: inline-block">设置</span>
        </div>
      </div>
      <div style="border-bottom: solid 1px #C9C9C9;"></div>
    </div>
    <div>
      <el-row>
        <el-col :span="24">
          <div style="margin-top: 10px;">
            <el-button @click="confirm" class="button" size="small" type="primary">提交</el-button>
          </div>
        </el-col>
      </el-row>
      <div style="width: 100px;text-align:left; margin-top: 10px">绑定应用平台:</div>
      <div style="display: inline-block">
        <el-select multiple placeholder="应用平台" size="small" style="width: 500px" v-model="platform">
          <el-option
            :key="item.value"
            :label="item.label"
            :value="item.value"
            v-for="item in platforms"
          >
          </el-option>
        </el-select>
      </div>
    </div>

    <div style="margin-top: 10px">
      <el-row>
        <el-col :span="23">
          <label style="margin-right: 5px;"> 关联分类:</label>
        </el-col>
      </el-row>

      <el-row style="margin-top: 10px">
        <el-table highlight-current-row :data="tableData" :height="tableHeight" border stripe style="width: 100%;">
          <el-table-column label="字段名称" min-width="200" prop="name">
            <template slot-scope="scope">
              <el-input @change="((value) => {selectName(value, scope.$index)})" v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="关联分类" min-width="200" prop="tagId">
            <template slot-scope="scope">
              <el-select v-model="scope.row.tagId" placeholder="" style="width: 500px">
                <el-option
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  v-for="item in Options"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <span><el-link @click="del(scope.$index)" type="danger">删除</el-link></span>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <div style="text-align: center; border: solid 1px #e6e9f3; height: 48px; line-height: 48px;">
          <el-link @click="addClick" style="color: #2db7a0"><i class="el-icon-plus"></i> 新增字段</el-link>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "CalculatorOption",
  data() {
    return {
      platforms: [],
      platform: [],
      tableData: [],
      cascadeProps: {multiple: true},
      Options: [],
      tagId: '',
      name: '',
      waitingResponse: false,
      tableHeight: ''
    }
  },
  methods: {
    goBack: function () {
      this.$router.go(-1)
    },
    handleChange(value) {
      this.subject = value;
      console.log(this.subject);
    },
    addClick: function () {
      this.tableData.push({
        name: '',
        tagId: ''
      })
    },
    del: function (ids) {
      this.$confirm('确定删除此关联分类？如果有医学公式关联分类选择分类信息，信息会同步删除', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(ids, 1)
      })
    },
    selectName(value, index) {
      this.tableData[index].name = value
      for (let i = 0; i < this.tableData.length; i++) {
        if (i != 0) {
          if (this.tableData[index - i].name === this.tableData[index].name) {
            this.$message.warning("名称重复请重新填写")
            this.tableData[index].name = '';
            return;
          }
        }
      }
    },

    confirm: function () {
      if (this.waitingResponse) {
        return
      }
      this.waitingResponse = true

      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].name === '') {
          this.$message.warning("请填写名称")
          this.waitingResponse = false
          return;
        }
        if (this.tableData[i].tagId === '') {
          this.$message.warning("请填写关联分类")
          this.waitingResponse = false
          return;
        }
      }
      let param = new URLSearchParams();
      param.append("platform", JSON.stringify(this.platform))
      param.append("tableData", JSON.stringify(this.tableData))
      this.axios.post('/pmph/action/medicalCalculator/saveCalculatorLibField', param)
        .then((response) => {
          if (response.data === true) {
            this.$router.push("/releaseAndSyncTab")
          } else {
            this.$message.warning('不可以修改字段类型')
            this.waitingResponse = false
          }
        })
        .catch((error) => {
          this.waitingResponse = false
          console.error(error)
        })
    }
  },
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 300;

    this.axios.get("/pmph/action/medicalCalculator/selectPlatform", {})
      .then((response) => {
        console.log(response)
        this.platforms = response.data
      })

    this.axios.get("/pmph/action/medicalCalculator/selectOneLevelTag", {})
      .then((response) => {
        console.log(response)
        this.Options = response.data
      })

    this.axios.get("/pmph/action/medicalCalculator/selectCalculatorTableData", {})
      .then((response) => {
        console.log(response)
        this.tableData = response.data.medicalCalculatorLibFields
        this.platform = JSON.parse(response.data.platform)
      })
  }
}
</script>

<style scoped>

</style>
